function quadraticCurveTo( context )
{
    context.fillText( "quadraticCurveTo", 110, 300 );
    context.moveTo( 150, 150 );
    context.quadraticCurveTo( 175, 125, 200, 150 );
    context.quadraticCurveTo( 235, 135, 250, 170 );
    context.quadraticCurveTo( 285, 190, 250, 220 );
    context.quadraticCurveTo( 244, 270, 200, 250 );
    context.quadraticCurveTo( 180, 280, 150, 250 );
    context.quadraticCurveTo( 110, 260, 100, 220 );
    context.quadraticCurveTo( 70, 200, 100, 170 );
    context.quadraticCurveTo( 110, 130, 152, 150 ); 

}

function bezierCurveTo( context )
{
    context.fillText( "bezierCurveTo", 110, 28 );
    context.moveTo( 0, 100 );
    context.bezierCurveTo( 50, 0, 150, 200, 200, 100 );
    context.bezierCurveTo( 250, 0, 350, 200, 400, 100 );

}

function complexPathStyle()
{
    var canvas = document.getElementById( 'canvas' );
    var context = canvas.getContext( '2d' );

    context.font = "20px Brush Script Std";
    context.lineWidth = 5;
    context.globalAlpha = 0.5;
    context.strokeStyle = "#00ffff";

    quadraticCurveTo( context );
    bezierCurveTo( context );

    context.stroke();  

}

function onloadHandler()
{
    complexPathStyle();
} 

window.onload = onloadHandler;   